
<template>
	<div class="homeAdver">
		<h1 class="pageTitle">首页滚动广告</h1>
		<div class="headerButton">
			<el-button type="primary" class="addSwiper" @click="dialogFormVisible = true">添加滚动广告</el-button>
		</div>
		<div class="homeAdverTable" style="min-width: 1200px;">
			<el-table :data="homeAdverTableData">
				<el-table-column prop="content" label="内容" width="180">
				</el-table-column>
				<el-table-column prop="href" label="链接">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="upData(scope.row.orders)">上升</el-button>
						<el-button @click="downData(scope.row.orders)">下降</el-button>
						<el-button type="danger" @click="deleteData(scope.row.id)" >删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :total="dataCount" style="text-align: center;" :current-page.sync="currentPage" @current-change="changePage(currentPage)">
			</el-pagination>
		</div>
		<div class="addAdverDialog">
			<el-dialog title="添加滚动广告" :visible.sync="dialogFormVisible">
				<el-form ref="form" :model="form" :rules="rules">
					<el-form-item label="新闻标题" :label-width="formLabelWidth" prop="content" style="text-align: left;">
						<el-input v-model="form.content" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="链接地址" :label-width="formLabelWidth" prop="href">
						<el-input v-model="form.href" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitAdver('form')">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import config from '@/assets/js/config.js'
	export default {
		data(){
			return {
				homeAdverTableData:[],
		        dialogTableVisible: false,
		        dialogFormVisible: false,
		        form: {
		          content: '',
		          href: ''
		        },
		        formLabelWidth: '120px',
		        rules:{
		       		content: [
			            { required: true, message: '请输入新闻标题', trigger: 'blur' }  
			        ],
			        href: [
			        	{ required: true, message: '请输入链接地址', trigger: 'blur' }
			        ]
				},
				currentPage:1,
				dataCount:0
			}
		},
		created(){
			//请求所有数据
			this.$require.get(config.adverList,{
				params:{
					page:0
				}
			}).then((res)=>{
				console.log(res);
				this.homeAdverTableData = res.data.data.rows;
				this.dataCount = res.data.data.count;
			})
		},
		methods:{
			confirmDelete(){
				this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'warning'
		        }).then(() => {
		          	this.$message({
			            type: 'success',
			            message: '删除成功!'
		        	});
		        }).catch(() => {
		          	this.$message({
		            	type: 'info',
		            	message: '已取消删除'
		          	});          
		        });
			},
			//提交增加数据
			submitAdver(formName){
				this.$refs[formName].validate((valid) => {
		          	if (valid) {
		          		console.log(this.form.content);
		          this.$submit.post(config.addAdver,{
							content: this.form.content,
							href: this.form.href
						}).then((res)=>{
							console.log("增加成功");
							this.$require.get(config.adverList,{
								params:{
									page:0
								}
							}).then((data)=>{
								this.homeAdverTableData = data.data.data.rows;
								this.dataCount = data.data.data.count;
								this.currentPage = 1;
							})
							this.dialogFormVisible = false;
							this.form.content = '';
							this.form.href = '';
						})
		          	}else{
		            	console.log('error submit!!');
		            	return false;
		          	}
		       });
				
			},
			//删除数据
			deleteData(idx){
				console.log(idx);
				this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'warning'
		        }).then(() => {
		        	//提交删除请求
		        	this.$submit.post(config.deleteAdver,{
						id:idx
					}).then((res)=>{
						console.log("删除成功");
						this.$require.get(config.adverList,{
							params:{
								page:this.currentPage-1
							}
						}).then((result)=>{
				          	this.$message({
					            type: 'success',
					            message: '删除成功!'
				        	});
							this.homeAdverTableData = result.data.data.rows;
							this.dataCount = result.data.data.count;
						})
					})
		        }).catch(() => {
		          	this.$message({
		            	type: 'info',
		            	message: '已取消删除'
		          	});    
		        });
			},
			//上移数据
			upData(idx){
				this.$submit.post(config.sortAdver,{
					move: 1,
					orders: idx
				}).then((res)=>{
					console.log("上升成功");
					console.log(res);
					this.$require.get(config.adverList,{
						params:{
							page:this.currentPage-1
						}
					}).then((result)=>{
						this.$message('上升成功');
						this.homeAdverTableData = result.data.data.rows;
					})
				})
			},
			//下移数据
			downData(idx){
				this.$submit.post(config.sortAdver,{
					move: -1,
					orders: idx
				}).then((res)=>{
					console.log("下降成功");
					this.$require.get(config.adverList,{
						params:{
							page:this.currentPage-1
						}
					}).then((result)=>{
						this.$message('下降成功');
						this.homeAdverTableData = result.data.data.rows;
					})
				})
			},
			changePage(page){
				console.log(page);
				this.$require.get(config.adverList,{
					params:{
						page:this.currentPage-1
					}
				}).then((res)=>{
					console.log(res);
					this.homeAdverTableData = res.data.data.rows;
				})
			}
		}
	}
</script>

<style lang="scss">
.homeAdver{
	height: 100%;
	overflow: auto;
	padding: 20px 30px 0;
	.pageTitle{
		font-size: 30px!important;
	}
	.headerButton{
		margin: 20px 0 0;
		overflow: hidden;
	}
	.el-form-item__label{
		text-align: left;
	}
	.homeAdverTable{
		overflow: auto;
	}
}
</style>